<template>
	<view class="address-item-wrap-container" :style="wrapStyle">
		<view class="item-header">
			<view class="day-address">
				<text>{{ record.name }}</text>
			</view>
			<image @click="toggleHandle" :class="{active:isOpen}" src="../../static/icon/chevron-right-addres.png"
				class="chevron-icon"></image>
		</view>
		<view class="address-list" :class="{open:isOpen}">
			<view class="address-list-item" v-for="(item,index) in record.timeList" :key="index">
				<view class="address-list-item-circle"></view>
				<view class="address-list-item-text"><text>{{ item.time }} - {{ item.name }}</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		mounted() {
			// console.log(this.record, 'spot-item-mounted');
		},
		props: {
			record: {
				required: true,
			}
		},
		methods: {
			toggleHandle() {
				this.isOpen = !this.isOpen
			}
		},
		computed: {
			wrapStyle() {
				const { paddingTop, marginBottom, itemHeight, record } = this
				const num = record.timeList.length || 0
				const heightValue = paddingTop + (itemHeight * num) + marginBottom * (num - 1)
				return `--padding-value: ${paddingTop + 'px'};--item-height: ${itemHeight + 'px'};--open-height: ${heightValue + 'px'};--margin-bottom: ${marginBottom + 'px'}
				`
			},
		},
		data() {
			return {
				isOpen: true,
				paddingTop: uni.upx2px(24),
				itemHeight: uni.upx2px(48),
				marginBottom: uni.upx2px(16),
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-item-wrap-container {
		.address-list {
			padding-left: 64rpx;
			box-sizing: border-box;
			height: 0;
			overflow: hidden;
			transition: height cubic-bezier(0.23, 1, 0.320, 1) .2s;


			&.open {
				height: var(--open-height);
				padding-top: var(--padding-value);
			}

			.address-list-item {
				display: flex;
				align-items: center;
				margin-bottom: var(--margin-bottom);
				height: var(--item-height);

				&:last-child {
					margin-bottom: 0;
				}

				.address-list-item-circle {
					width: 12rpx;
					height: 12rpx;
					background-color: rgba(0, 0, 0, 0.6);
					border-radius: 50%;
					overflow: hidden;
					margin: 0 12rpx;
				}

				.address-list-item-text {
					font-size: 26rpx;
					color: rgba(0, 0, 0, 0.6);
				}
			}
		}

		.item-header {
			padding: 12rpx 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			position: relative;
			background: #F6F6F6;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			overflow: hidden;

			.day-value {
				height: 40rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.9);
				line-height: 40rpx;
			}

			.day-line {
				width: 2rpx;
				height: 20rpx;
				background-color: #E5E6EB;
				margin: 0 16rpx;
			}

			.day-address {
				height: 40rpx;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.9);
				line-height: 40rpx;
			}

			.chevron-icon {
				width: 32rpx;
				height: 32rpx;
				margin-left: auto;
				transition: transform cubic-bezier(0.215, 0.610, 0.355, 1) .2s;

				&.active {
					transform: rotate(180deg);
				}
			}
		}
	}
</style>